<template>
	<div>
		<el-card class="!border-none p-5" shadow="never" :body-style="{ padding: 0 }">
			<el-button type="primary" v-auth="'crontab/crontab/add'" class="mb-4" @click="handleAdd"> 添加定时任务 </el-button>
			<el-table class="layout-table-card" :data="state.tableList" v-loading="state.loading">
				<el-table-column prop="name" label="名称" min-width="80" />
				<el-table-column prop="command" label="命令" />
				<el-table-column prop="params" label="参数" />
				<el-table-column prop="expression_desc" label="规则" />
				<el-table-column prop="status" label="状态" min-width="100">
					<template #default="{ row }">
						<el-tag v-if="row.status == 1" type="success">{{ row.status_desc }}</el-tag>
						<el-tag v-if="row.status == 2" type="info">{{ row.status_desc }}</el-tag>
						<el-tag v-if="row.status == 3" type="danger">{{ row.status_desc }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="error" label="错误原因" />
				<el-table-column label="操作" width="150" fixed="right">
					<template #default="{ row }">
						<div class="flex">
							<el-button type="primary" v-auth="'crontab/crontab/detail'" link @click="handleDetail(row)"> 详情 </el-button>
							<el-button type="primary" v-auth="'crontab/crontab/edit'" link @click="handleEdit(row)"> 编辑 </el-button>
							<el-button type="danger" v-auth="'crontab/crontab/delete'" link @click="handleDelete(row.id)"> 删除 </el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="state" @tableChange="getTableList" />
			</div>
		</el-card>
		<EditDialog v-if="showDialog" ref="editRef" @submit="getTableList" @close="showDialog = false" />
		<DetailDialog v-if="showDialog" ref="detailRef" @submit="getTableList" @close="showDialog = false" />
	</div>
</template>

<script lang="ts" setup name="crontabIndex">
import { ref, reactive, onMounted, nextTick } from 'vue';
import { crontabLists, crontabDel } from '/@/api/setting/crontab';
import { usePage } from '/@/hooks/usePage';
import { messageBox } from '/@/utils/message';
import EditDialog from '/@/views/sys/crontab/component/edit.vue';
import DetailDialog from '/@/views/sys/crontab/component/detail.vue';

const editRef = ref();

const detailRef = ref();

const showDialog = ref(false);

const state = reactive<TableDataState>({
	loading: false,
	tableList: [],
	queryParams: {},
	tableParams: {
		page_num: 1,
		page_limit: 15,
		page_total: 0,
	},
});

const { getTableList } = usePage({ tableData: state, apiData: crontabLists });

const handleAdd = async () => {
	showDialog.value = true;
	nextTick(() => {
		editRef.value?.open('add');
	});
};

const handleDetail = async (row: any) => {
	showDialog.value = true;
	nextTick(() => {
		detailRef.value?.setFormData(row,function(){
			detailRef.value?.open();
		});
	});
};

const handleEdit = async (row: any) => {
	showDialog.value = true;
	nextTick(() => {
		editRef.value?.setFormData(row, function() {
			editRef.value?.open('edit');
		});
	});
};

const handleDelete = async (id: number) => {
	messageBox(`确定要删除定时任务吗？`).then(async () => {
		await crontabDel({ id: id });
		getTableList();
	});
};

onMounted(() => {
	getTableList();
});
</script>

<style lang="scss"></style>
